<template>
     <div id="background">
    <el-container>
      <el-header id="xiaZaiHeadPosition">
        <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
          <el-col  :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
            <img v-bind:src="backIcon" class="backSize" @click="back" />
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol">
            <span class="titleSize">我的下载</span>
          </el-col>
          <el-col :xs="3" :sm="3" :md="3" :offset="5" class="imgCol">
            <span class="titleSize" @click="changeToEdit">{{btnTop}}</span>
          </el-col>
        </el-row>
      </el-header>
      <el-main >
        <el-scrollbar  height="100%" id="xiaZaiScroll" >
            <div>
              <div style="height:5px;backgroundColor:#f5f4f9"></div>
                <div v-for="info in Infos" v-bind:key="info.id" class="boxColor" >
                    <el-container style="padding:10px 10px 6px 10px;backgroundColor:#ffffff">
                        <el-aside width="90px" >
                            <el-row>
                              <el-image
                                style="width: 80px; height: 80px"
                                :src="info.pic"
                                fit="cover"
                              />
                            </el-row>
                        </el-aside >
                        <el-container >
<!--                            <el-aside id="xiaZaiCenter"  width="60%" >-->
<!--                                <el-row type="flex">-->
<!--                                    <el-col :offset="3" class="xiaZaiTitle">-->
<!--                                        维修电工-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                                <el-row type="flex" style="margin-top:20px">-->
<!--                                    <el-col :offset="3" class="xiaZaiJinDu">    -->
<!--                                        125M/523M-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </el-aside>-->
<!--                            <el-main id="xiaZaiRight" class="imgCol">-->
<!--                                    <el-row type="flex" >-->
<!--                                    <el-col v-show="btnShow" >-->
<!--                                        <el-checkbox class="xiaZaiCheckBox" v-model="info.choose"></el-checkbox>-->
<!--                                    </el-col>-->
<!--                                    </el-row>-->
<!--                            </el-main>-->
                          <el-main >
                            <el-row style="margin-top: 15px">
                              <span class="words noHuanHang">维修电工</span>
                            </el-row>
                            <el-row  style="margin-top: 15px">
                              <span class="words">125m/523m</span>
                            </el-row>
                          </el-main>
                          <el-aside width="90px"  class="imgCol">
                            <el-row type="flex" >
                               <el-col v-show="btnShow" >
<!--                                  <el-checkbox class="xiaZaiCheckBox" v-model="info.choose"></el-checkbox>-->
                                 <van-checkbox v-model="info.choose" checked-color="#53cdf5"></van-checkbox>
                               </el-col>
                            </el-row>
                          </el-aside>
                        </el-container>          
                    </el-container>
                  <div style="height:5px;backgroundColor:#f5f4f9"></div>
                </div>
            </div>
        </el-scrollbar>
      </el-main>
<!--      <el-footer id="xiaZaiFootPosition" style="backgroundColor: #ffffff">-->
        <div   style="backgroundColor:#ffffff;position:fixed;bottom:0px;width:100%;z-index:100">
          <el-row v-show="btnShow" style="margin-bottom: 10px">
            <el-col :xs="12" :sm="12" :md="12" class="end" >
              <button class="btnQuanXuan" v-show="!cancelShow" @click="selectAll">全选</button>
              <button class="btnQuanXuan" v-show="cancelShow" @click="cancelAll">取消</button>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12">
              <button class="btnShanChu">删除</button>
            </el-col>
          </el-row>
        </div>
<!--      </el-footer>-->
    </el-container>
  </div>
</template>
<script>
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
import userPhoto from '../../assets/img/mine/geRenZhuYe/test.jpg'
import quanXuanIcon from '../../assets/img/mine/xiaZai/quanXuan.png'
import shanChuIcon from '../../assets/img/mine/xiaZai/shanChu.png'

export default {
    components: {
    
    },
    data(){
        return{
            cancelShow:false,
            btnShow:false,
            btnTop:'管理',
            quanXuanIcon:quanXuanIcon,
            shanChuIcon:shanChuIcon,
            backIcon:backIcon,
            normalHeight:document.documentElement.clientHeight,
            title:{title:'维修电工'},
            userPhoto:'',
            Infos:[
                {
                    id:1,
                    choose:false,
                    pic:''
                },
                {
                    id:2,
                    choose:false,
                       pic:''
                },
                {
                    id:3,
                    choose:false,
                       pic:''
                },
                {
                    id:4,
                    choose:false,
                       pic:''
                },
                {
                    id:5,
                    choose:false,
                       pic:''
                },
                {
                    id:6,
                    choose:false,
                       pic:''
                },
                {
                    id:7,
                    choose:false,
                       pic:''
                },
                {
                    id:8,
                    choose:false,
                       pic:''
                },
                {
                    id:9,
                    choose:false,
                           pic:''
                }
            ]
        }
    },
    mounted(){
        var normalHeight=sessionStorage.getItem('normalHeight');

         var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#ffffff"
        bg.style.margin = "0px";

        var head=document.getElementById("xiaZaiHeadPosition");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        
        var main=document.getElementById("xiaZaiScroll");
        var mainHeight=normalHeight/30 *26;
        console.log("mainHeight:"+mainHeight);
        main.style.height=mainHeight+"px";

        // var foot=document.getElementById("xiaZaiFootPosition");
        // var footHeight=normalHeight/30 *3;
        // console.log("footHeight:"+footHeight);
        // foot.style.height=footHeight+"px";
    },
    methods:{
          back(){
            console.log("back:");
            this.$router.go(-1);
          },
          changeToEdit(){
              if(this.btnTop=='管理'){
                this.btnTop='取消';
                this.btnShow=true;
              }else{
             
                var i=0;
                for(i=0;i<this.Infos.length;i++){
                  this.Infos[i].choose=false;
                }
                this.btnShow=false;
                this.cancelShow=false;
                this.btnTop='管理';
              }

          },
          selectAll(){
              var i=0;
              for(i=0;i<this.Infos.length;i++){
                  this.Infos[i].choose=true;
              }
              this.cancelShow=true;
          },
          cancelAll(){
              var i=0;
              for(i=0;i<this.Infos.length;i++){
                  this.Infos[i].choose=false;
              }
              this.cancelShow=false;
          }
    }
}
</script>
<style>
  .end{
    display: flex;
    justify-content: flex-end;
  }
  .noHuanHang{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.boxColor{
    background-color: #fff;
}
.el-main {
    padding: 0px ;
}
.el-footer{
    padding:0px;
}
#xiaZaiHeadPosition {
  background-color: #53cdf5;
}
.imgCol {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-main {
    padding: 0px ;
}
.xiaZaiTitle{
    font-size: 1em;
    color: #707070;
}
.xiaZaiJinDu{
    font-size: 10px;
    color: #707070;
}
.xiaZaiLine{
    width: 100%;
    height: 7px;
    background-color: #f5f4f9;
}
.btnQuanXuan{
  background-color:#53cdf5;
  height: 40px;
  width: 90%;
  color: #ffffff;
  border:#53cdf5 1px solid;
  font-size: 1.125em;
  outline: none;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.btnShanChu{
  background-color: #f16161;
  height: 40px;
  width: 90%;
  color: #fff;
  font-size: 1.125em;
  outline: none;
  /* -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   -ms-border-radius: 0px;
   -o-border-radius: 0px;
   border-radius: 0px; */
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-style: none;
}
.xiaZaiCheckBox  .el-checkbox__inner {
    border-radius: 25px;
    width: 25px;
    height: 25px;
}
.xiaZaiCheckBox  .el-checkbox__inner::after {
    height: 18px;
    left: 10px;
}
.xiaZaiCheckBox .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #53cdf5;
    border-color: #53cdf5;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-height: 600px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
